<template>
<view class="integral">
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">签到</block>
	</cu-custom>	
	<view class="status">
		<view class="title">
			<block v-if="item.status">
				<image src="/static/complete.png"></image>
				今天已经签到，<text>获得奖励</text>
			</block>
			<block v-else>
				今天还没有签到哟，<text>马上行动吧</text>
			</block>
		</view>
		<view class="image">
			<image src="/static/int.png"></image>
			<view v-if="item.status"><text>&times;</text>{{ item.score }}</view>
		</view>
		<view class="btn" @tap="sign">{{ item.status ? '已签到' : '立即签到' }}</view>
	</view>		
	<view class="desc">
		<view v-for="(item, index) in integral" :key="index">
			<view>{{ item.name }}</view>
			<view>{{ item.value }}</view>
		</view>
	</view>
	<view class="calendar" v-if="list.length">
		<view class="tit">
			<view v-for="(item, i) in tabs" :key="i" :class="{ act: i === currentTab }" @tap="change(i)">{{ item }}</view>
		</view>
		<scroll-view scroll-y>
			<view class="date" v-if="!currentTab">
				<view class="th"><view v-for="(m, i) in date" :key="i">{{ m }}</view></view>
				<view v-for="(m, i) in list" :key="i">
					<view v-for="(o, x) in m" :key="x">
						<block v-if="!o.status">{{ o.day }}</block>
						<view v-else>
							<image src="/static/int_act.png"></image><text>&times;{{ o.score }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="log" v-else>
				<div class="item" v-for="i in record" :key="i.id">
					<view>
						<view class="int">
							<view><image src="/static/int_act.png"></image>{{ i.before_score }} - {{ i.after_score }}</view>
							<view><image src="/static/date.png"></image>{{ i.createtime }}</view>
						</view>
						<view class="dsc">{{ i.remark }}</view>
					</view>
					<view>{{ i.score }}</view>
				</div>
			</view>
		</scroll-view>
	</view>
</view>
</template>

<script>
	import { ScoreSign, ScoreRecord, signDay } from '@/common/api/users'
	import { mapGetters } from 'vuex'
	export default {
		name: 'integral',
		data () {
			return {
				item: { 
					score: 0,
					status: false
				}, // 今天签到获取的分数
				tabs: [],
				currentTab: 0,
				list: [], // 签到列表,
				integral: [], // 积分信息
				record: [], // 积分使用记录
				date: ['日', '一', '二', '三', '四', '五', '六'],
				params: {
					user_id: '',
					customer_id: '',
					card_id: ''
				}
			}
		},
		computed: {
			...mapGetters([
				'userInfo',
				'shop'
			])
		},
		onLoad(opt) {
			this.params.card_id = opt.card_id
			this.getList()
		},
		methods: {
			change (i) {
				this.currentTab = i
			},
			sign () { // 立即签到
				if (!this.item.status) {
					uni.showLoading({ mask: true })
					signDay(this.params).then(res => {
						uni.hideLoading()
						if (res.code === 20005) {
							uni.showModal({
								content: res.message,
								showCancel: false
							})
							return
						}
						this.item.score  = res.remain_score
						this.item.status = true						
					})
				}
			},
			async getList (card_id) {
				if (!this.shop) {
					setTimeout(this.getList, 500)
					return
				}
				this.params.user_id = this.userInfo.id
				this.params.customer_id = this.shop.customer_id
				uni.showLoading({ mask: true })
				await this.getSign()
				await this.getRecord()
				uni.hideLoading()
			},
			getSign () { // 获取签到信息
				return new Promise((resolve, reject) => {
					ScoreSign(this.params).then(res => {
						if (!res.cdoe) {
							const dayData = res.data.dayData					
							let list = [], month
							for(let i in dayData) list.push(dayData[i])
							list = list.map((item, index) => {
								if (!index) month = new Date(item.dvar.replace(/-/ig, '/')).getMonth() + 1						
								item.dvar = new Date(item.dvar.replace(/-/ig, '/')).getDay()
								item.day = index + 1
								item.status = item.status === '签到' ? true : false
								return item
							})
							this.tabs = [`签到日历 ( ${month}月 )`, '积分记录']
							const days = list.length
							let weekday = list[0].dvar
							let day = []
							const empty = { day: '', status: false, score: 0 }
							for (let i = 0; i < weekday; i++) day.push(empty)
							for (var j = 1; j <= days; j++) {
								day.push(list[j - 1])
								weekday++
								if (weekday % 7 === 0) {
									this.list.push(day)
									day = []
									weekday = 0
								} else {
									if (j === days) {
										for (let m = day.length; m < 7; m++ ) day.push(empty)
										this.list.push(day)
									}
								}
							}
							const toDay = new Date().getDate()
							let item = []
							this.list.forEach(n => {
								if (!item.length) item = n.filter(m => m.day === toDay)
							})
							this.item = item[0]							
							resolve()
						}
					}).catch(err => {
						reject(err)
						uni.showModal({
							content: '获取信息失败，请稍后重试',
							showCancel: false,
							success: res => {
								uni.navigateBack()
							}
						})
					})
				})
			},
			getRecord () { // 获取签到记录，积分信息
			  return new Promise(resolve => {
				ScoreRecord(this.params).then(res => {
					if (!res.code) {
						let list = [
							{ name: '总积分', value: res.data.result.total_score },
							{ name: '剩余积分', value: res.data.result.remain_score },
							{ name: '签到积分', value: res.data.result.sign_score },
							{ name: '消费积分', value: res.data.result.consume_score }
						]
						this.integral = list
						this.record = res.data.score.map(item => {
						    item.score = item.score < 0 ? item.score : `+${item.score}`
							return item
						})
						resolve()
					}
				})				  
			  })
			}
		}
	}
</script>

<style lang="less">
	@import '../common/styles/variables.less';
	page, uni-page-body { background-color:white !important;height: 100%;overflow: hidden; }
	.integral {
		overflow: hidden;
		height: 100%;
		display: flex;
		flex-direction: column;
		flex-flow: column;
		.status {
			background: @headBg;
			padding: 40upx 0;
			display: flex;
			color: white;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			flex-flow: column;
			.title { 
				font-size: @title; 
				font-weight: 600;
				display: flex;
				align-items: center;
				text {
					font-weight: normal;
					font-size:@minSize;
				}
				image {
					width: 40upx;
					height: 40upx;
					margin-right: 4upx;
				}
			}
			.btn {
				border:2px solid #d7bc6c;
				border-radius: 35upx;
				font-size:@minSize;
				padding: 10upx 50upx;
				background: linear-gradient(to right,@headBg, #c49f90);
			}
			.image {
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					margin: 30upx 0;				
					width: 60upx;
					height: 60upx;					
				}
				view {
					font-size:40upx;
					font-weight: 600;
					text {
						font-size:@minSize;
						padding: 0 10upx;
					}
				}
			}
		}
		.desc {
			display: flex;
			align-items: center;
			.border-bottom;
			box-shadow: 0 15upx 34upx #dedede;			
			padding: 15upx 0;
			& > view {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				flex-flow: column;
				text-align: center;
				position: relative;
				padding: 10upx 0;
				& > view {
					font-size:@minSize;
					&:last-of-type {
						font-weight: bold;
						color:@red
					}
				}
				&:not(:last-of-type) {
					&::after {
						position: absolute;
						content: '';
						top: 0;
						right: 0;
						border-right: 1px dashed #eaeaea;
						height: 100%;
					}						
				}				
			}
		}
		.calendar {
			flex: 1;
			display: flex;
			flex-direction: column;
			flex-flow: column;			
			.tit {
				height: @height;
				.border-bottom;
				display: flex;
				font-size:@title;
				align-items: center;
				padding: 0 15upx;
				font-weight: 400;
				& > view {
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					&::before {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						border-bottom: 4upx solid @red;
						transform: scaleX(0);
						will-change: transform;
						transition-duration: .4s;						
					}					
					&.act {
						color:@red;
						font-weight: 600;						
						&::before {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							transform: scaleX(.7);
						}
					}
				}
			}
			scroll-view {
				flex: 1;
				overflow: hidden;
				.date {
					margin: 15upx 0;
					view { font-size: 12px; height: 80upx }
					& > view {
						display: flex;
						margin: 0 15upx;
						&.th {
							& > view {
								color: #888
							}
						}
						& > view {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: center;
							color: @gray;
							& > view {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 100%;
								height: 100%;
								text { color: @red; font-weight: 600 }
								image {
									width: 40upx;
									height: 40upx;
									display: block;
								}
							}
						}
					}
				}
				.log {
					.item {
						padding: 0 15upx;
						display: flex;
						align-items: center;
						&:not(:last-of-type) {
							.border-bottom(15upx);
						}
						& > view {
							&:nth-of-type(1) {
								padding: 15upx 0;
								flex: 1;
								.int { 
									display: flex;
									justify-content: space-between;
									& > view {
										display: flex;
										align-items: center;
										image {
											width: 30upx;
											height: 30upx;
											display: block;
											margin-right: 10upx;
										}								
										&:last-of-type {
											font-size:@minSize;
											color:@gray;									
										}
									}
								}
								& > .dsc { font-size: @minSize; .twoLine(2) }
							}
							&:nth-of-type(2) {
								width: 150upx;
								text-align: center;
								font-size:@title;
								color: @red;
								font-weight: bold;
							}
						}
					}
				}				
			}
		}
	}
</style>
